<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
  <!-- 必须的 meta 标签 -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <title>GameHub商城</title>
  <!-- Bootstrap 的 CSS 文件 -->
  <link rel="stylesheet" href="${pageContext.request.contextPath}/font/stylesheet.css">
  <link rel="stylesheet" href="${pageContext.request.contextPath}/frame/css/bootstrap.min.css" >
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/global.css">
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/shoppingCart.min.css">
  <script src="${pageContext.request.contextPath}/js/jquery-3.5.1.min.js" ></script>
  <script src="${pageContext.request.contextPath}/js/bootstrap.bundle.min.js"></script>
  <script>
    $(function(){

      
    }) 
    function choose(obj) {
      var $checkbox = $(obj);
      var $text = $checkbox.text();
      if($text=="-" || $text=="+" || $checkbox.attr("class").indexOf("game-count-input") > -1){
        $input = $checkbox.closest(".count-box").find("input")
        
        if($text == "-" && $input.val() > 0) {
          event.stopPropagation();
          changeNum($checkbox)
          $input.val(parseInt($input.val())-1)
        }else if($text == "+") {
          event.stopPropagation();
          changeNum($checkbox)
          $input.val(parseInt($input.val())+1)
        }else {
        	
    	  changeNum($checkbox)
        }
      }else {
        if($checkbox.is("li"))$checkbox = $(obj).find(".checkicon");
        var $check = $checkbox.attr("class")
        var $li = $checkbox.closest("li")
        var $icons = $(".checkicon") 
        var flag = true;
        if($check.indexOf("uncheck") != -1){
          $checkbox.html('<svg  xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-square" viewBox="0 0 16 16"><path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/><path d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.235.235 0 0 1 .02-.022z"/></svg>')
          $li.css("background-color","rgb(64,64,64)")
          $checkbox.removeClass("uncheck")
          $checkbox.addClass("checked")
        }else {
          $checkbox.html('<svg  xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-square" viewBox="0 0 16 16"><path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/></svg>')
          $li.css("background-color","rgb(32,32,32)")
          $checkbox.removeClass("checked")
          $checkbox.addClass("uncheck")
        }
        $(".checkicon").each(function (index,element){
          var $icon = $(this)
          if($icon.attr("class").indexOf("checked")>-1){
            flag = false
          }
        })
        if(flag){
          $("#select-all").text("全选")
          $("#select-all").css("background-color","rgb(32,32,32)")
        }else {
          $("#select-all").text("全反选")
          $("#select-all").css("background-color","rgb(64,64,64)")
        }
        getSum()
      }
    }
    function chooseAll() {
      $text = $("#select-all").text();
      $checkicon = $(".checkicon")
      $li = $("#games-list li")
      if($.trim($text) == "全选"){
        $checkicon.html('<svg  xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-square" viewBox="0 0 16 16"><path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/><path d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.235.235 0 0 1 .02-.022z"/></svg>')
        $("#select-all").text("全反选")
        $("#select-all").css("background-color","rgb(64,64,64)")
        $checkicon.removeClass("uncheck")
        $checkicon.addClass("checked")
        $li.css("background-color","rgb(64,64,64)")
      }else if($.trim($text) == "全反选"){
        $checkicon.removeClass("checked")
        $checkicon.addClass("uncheck")
        $("#select-all").text("全选")
        $("#select-all").css("background-color","rgb(32,32,32)")
        $checkicon.html('<svg  xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-square" viewBox="0 0 16 16"><path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/></svg>')
        $li.css("background-color","rgb(32,32,32)")
      }
      getSum()
    }
    function changeNum(obj){
    	var $input = obj.closest(".count-box").find("input")
    	var $text = obj.text();    	
        if($text == "-" && $input.val() > 0) {
	    	$.get("${pageContext.request.contextPath}/cart/changeNum",{"cartId":obj.attr("data-cartId"),"change":-1},function(data){
	    		update(obj,data)
	    		getSum()
	    	},"json")
          }else if($text == "+") {
            $.get("${pageContext.request.contextPath}/cart/changeNum",{"cartId":obj.attr("data-cartId"),"change":1},function(data){
            	update(obj,data)
            	getSum()
            },"json")
        }else{
        	event.stopPropagation();
			$.get("${pageContext.request.contextPath}/cart/changeNum",{"cartId":obj.attr("data-cartId"),"count":obj.val()},function(data){
				update(obj,data)
				getSum()
            },"json")
        }
    }
    function update(obj,data){
    	var $li = obj.closest("li")
   		var $newPrice = $li.find(".new-price")
   		$newPrice.text("￥"+data.finalprice)
    }
    function getSum() {
    	$checklist = $(".checked")
    	var cartlist = []
    	$checklist.each(function(){
    	    cartlist.push($(this).attr("data-cartId"))
    	  });
		$.get("${pageContext.request.contextPath}/cart/getSum",{"cartlist":JSON.stringify(cartlist)},function(data){
			$("#sum-discount")[0].innerHTML = "￥"+data.totalDiscount
			$("#sum-price").text(data.origin_price)
			$("#sum-final").text(data.final_price)
        },"json")    	
    }
    function submitorder() {
    	$checklist = $(".checked")
    	var cartlist = []
    	$checklist.each(function(){
    	    cartlist.push($(this).attr("data-cartId"))
    	  });
    	var string = "${pageContext.request.contextPath}/cart/createOrder?"
    	for(var i in cartlist) {
    		if(i == cartlist.length-1){
    			string +="id="+cartlist[i]
    		}else {    			
	    		string +="id="+cartlist[i]+"&"
    		}
    	}
    	
    	alert(string)
    	window.location.href = string
    }
  </script>
</head>
<body>
  <!-- 头部导航标签 -->
  <nav class="navbar navbar-expand-lg ">
    <a class="navbar-brand" href="#"><img src="../img/logo.png" alt="" height="40px" class="d-inline-block align-top"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">商城 <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">榜单</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">帮助</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">常见问题</a>
        </li>
      </ul>
          <a href="${pageContext.request.contextPath}/pages/regest.jsp" class="navbar-text">注册</a>
          <c:if test="${not empty user}">
            <a href="${pageContext.request.contextPath}/user/exit" class="navbar-text">退出账户</a>
          </c:if>
          <c:if test="${empty user}">
            <a href="${pageContext.request.contextPath}/pages/login.jsp" class="navbar-text">登录</a>
          </c:if>
    </div>
  </nav>
  <!-- 搜索和商城导航栏 -->
  <div class="container mx-auto px-0 mb-2 sticky-top" id="banner-search">
    <div class="row px-0">
      <div class="col-md-1"></div>
      <nav class="col-lg-10 col-md-10 navbar navbar-expand-lg px-0" id="test">
        <a class="navbar-brand" href="#">
          <div class="input-group">
            <div class="input-group-prepend">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
                <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
              </svg>
            </div>
            <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
          </div>
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarText1">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#">探索 <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">浏览</a>
            </li>
          </ul>
              <c:if test="${not empty user}">
                <span class="navbar-text">欢迎${user.username}</span>
                <a href="${pageContext.request.contextPath}/pages/personal.jsp" class="navbar-text">个人中心</a>
                <a class="navbar-text">愿望清单</a>
                <a href="${pageContext.request.contextPath}/cart/getUserCart" class="navbar-text">购物车<span class="badge badge-light ml-1">4</span></a>
              </c:if>
        </div>
      </nav>
      <div class="col-md-1"></div>
    </div>
  </div>
  <main class="container mx-auto px-0 " >
    <div class="row px-0 ">
      <div class="col-1"></div>
      <!-- 页面主体 -->
      <div class="col-10 shoppingCart">
        <div class="row main-title">
          我的购物车
        </div>
        <div class="row d-flex flex-row">
          <div class="select-all" id="select-all" onclick="chooseAll()">
            全选
          </div>
          <div class="select-all" id="remove-select" onclick="removeAll()">
            删除选中
          </div>
        </div>
        <div class="row body d-flex flex-row">
          <section class="col flex-grow-1 items">
            <ul class="row d-flex flex-column " id="games-list">
              <!-- 商品列表 -->
              <c:if test="${not empty list}">
              	<c:forEach items="${list}" var="cart">
              		<li class="rounded flex-grow-1 d-flex flex-row" onclick="choose(this)">
                <div class="img flex-shrink-0">
                  <img src="${cart.game.game_src}" class="rounded" alt="">
                </div>
                <div class="desc flex-grow-1 d-flex flex-column justify-content-between">
                  <div>
                    <div class="d-flex flex-row justify-content-between firstline">
                      <div class="hints d-flex flex-row">
                        <span class="rounded">基础游戏</span>
                        <c:if test ="${cart.game.game_discount != 'no discount'}">
	                        <span class="rounded">跳楼大甩卖</span>                   
	                    </c:if>
                        
                      </div>
                      <div class="d-flex price align-items-center">
	                      <c:if test ="${cart.game.game_discount != 'no discount' }">
	                        <span class="rounded">${cart.game.game_discount}%</span>
	                        <span class="old">￥${cart.game.game_original_price}</span>                      
	                      </c:if>
                        <span class="new ">￥${cart.game.game_final_price }</span>
                      </div>
                    </div>
                    <div class="d-flex flex-row justify-content-between">
                      <div class="gametitle">
                        ${cart.game.game_name }
                      </div>
                      <div class="time">
                        优惠截至于2022/3/7 01:00
                      </div>
                    </div>
                    <div class="d-flex flex-row justify-content-between align-items-center multiple">
                      <div class="d-flex flex-row align-items-center">
                        <nav class="d-flex flex-row count-box">
                          <div class="btn btn-light py-0" onclick="choose(this)" data-cartId="${cart.id}">-</div>
                          <input type="number" class="form-control game-count-input" name="count" onchange="choose(this)" value="${cart.gamecount}"  oninput="this.value = this.value.replace(/[^0-9]/g, '');" data-cartId="${cart.id}">
                          <div class="btn btn-light py-0" onclick="choose(this)" data-cartId="${cart.id}">+</div>
                        </nav>
                      </div>
                      <div class="time">
                        小计:&nbsp;&nbsp;  <span class="new new-price">￥${cart.finalprice}</span>
                      </div>
                    </div>
                  </div>
                  <div class="d-flex flex-row justify-content-between">
                    <div>
                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-windows" viewBox="0 0 16 16">
                        <path d="M6.555 1.375 0 2.237v5.45h6.555V1.375zM0 13.795l6.555.933V8.313H0v5.482zm7.278-5.4.026 6.378L16 16V8.395H7.278zM16 0 7.33 1.244v6.414H16V0z"/>
                      </svg>
                    </div>
                    <div class="link">
                      <a href="">添加至愿望单</a>
                      <a href="">移除</a>
                      <span class="align-self-center uncheck checkicon" data-cartId="${cart.id}" onclick="choose(this)">
                        <svg  xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-square" viewBox="0 0 16 16">
                          <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
                        </svg>
                      </span>
                    </div>
                  </div>
                </div>
              </li>
              	</c:forEach>
              </c:if>              
            </ul>
          </section>
          <aside class="flex-shrink-0 d-flex flex-column sum">
            <div class="title">游戏和应用概览</div>
            <div class="price d-flex flex-row justify-content-between">
              <span>价格</span>
              <span id="sum-price">￥0</span>
            </div>
            <div class="price d-flex flex-row justify-content-between">
              <span>特卖折扣</span>
              <span id="sum-discount">-￥0</span>
            </div>
            <div class="total d-flex flex-row justify-content-between">
              <span>总计</span>
              <span id="sum-final">￥0</span>
            </div>
            <a  class="btn btn-primary" onclick="submitorder()" id="submit-order">下单</a>

          </aside>
        </div>
      </div>

      <div class="col-1"></div>
    </div>
  </main>

</body>
</html>